<script setup lang="ts">
import {useGovernmentStore} from "../store/governmentData";

const GovernmentStore = useGovernmentStore();

const columns = [
  {
    title: '相关部门',
    dataIndex: 'description',
    key: 'description',
    width: '20%',
  },
];

const updateLinkSets = () => {
  GovernmentStore.updateLink();
};
updateLinkSets();
</script>

<template>
  <div class="flex flex-col flex-1 p-5 overflow-y-auto main-content">
    <h2 class="text-center my-4">政府部门</h2>
    <a-table
        :columns="columns"
        :data-source="GovernmentStore.getLinkSets"
        :loading="GovernmentStore.getLinkLoading"
        :pagination="GovernmentStore.pagination"
        row-key="url"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'url'">
          <a :href="record.url" class="text-blue-500 hover:underline">{{ record.url }}</a>
        </template>
        <template v-else-if="column.key === 'description'">
          <a :href="record.url" class="text-blue-500 hover:underline">
            <span>{{ record.description }}</span>
          </a>
        </template>
      </template>
    </a-table>
  </div>
</template>

<style scoped>
</style>
